import React, { PureComponent, createContext } from 'react'


//定义一个高阶组件
function withUser(WrapperComponent) {
  return class extends PureComponent {
    render() {
      return (
        <UserContext.Consumer>
          {
            user => {
              return <WrapperComponent {...this.props} {...user}></WrapperComponent>
            }
          }
        </UserContext.Consumer>
      )
    }
  }
}

//创建Context

const UserContext = createContext({
  nickname: "默认",
  level: -1,
  区域: "中国"
})

class Home extends PureComponent {
  render() {
    return (
      <div>
        <h2>Home：{`昵称：${this.props.nickname}  等级：${this.props.level}  区域：${this.props.level}  区域：${this.context.区域}`}</h2>
      </div>
    )
  }
}

Home.contextType = UserContext

class About extends PureComponent {
  render() {
    return (
      <div>
        <h2>Home：{`昵称：${this.props.nickname}  等级：${this.props.level}  区域：${this.props.level}  区域：${this.context.区域}`}</h2>
      </div>
    )
  }
}

About.contextType = UserContext

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <UserContext.Provider value={{ nickname: "why", level: 18, 区域: "中国" }}>
          <UserHome></UserHome>
          <UserAbout></UserAbout>
        </UserContext.Provider>

      </div>
    )
  }
}

const UserHome = withUser(Home);
const UserAbout = withUser(About);



export default App
